<template>
  <div class="chartsStyle" ref="mainRefMap"></div>
</template>
<script setup>
import { onMounted, ref, nextTick } from "vue";
import * as echarts from "echarts";
import china from "../../assets/china.json";

const mainRefMap = ref();

// 注册中国地图
echarts.registerMap("china", china);

const chart1 = () => {
  const myChart = echarts.init(mainRefMap.value);
  const option = {
    tooltip: {
      trigger: "item",
      formatter: "{b}<br/>数值: {c}",
    },
    geo: {
      map: "china",
      roam: true,
      zoom: 1.9,
      center: [104.46, 37.5],
      itemStyle: {
        areaColor: "#000E51",
        borderColor: "#4788FB"
      },
      emphasis: {
        itemStyle: {
          areaColor: "#389BB7"
        }
      },
      regions: [  // 将data改为regions来设置特定区域样式
        { name: "山东省", itemStyle: { areaColor: "#EAA300" } },
        { name: "内蒙古", itemStyle: { areaColor: "#EAA300" } }
      ]
    },
    series: [
      // 添加流动线条特效系列
      {
        name: "流动特效",
        type: "lines",
        zlevel: 2,
        symbol: ["none", "arrow"],
        symbolSize: 10,
        effect: {
          show: true,
          period: 6,
          trailLength: 0.7,
          symbol: "arrow",
          symbolSize: 8
        },
        lineStyle: {
          color: "#c5f80e",
          width: 1,
          opacity: 0.6,
          curveness: 0.2
        },
        data: [
          // 各城市到石家庄的连线
          { coords: [[125.35, 43.88], [114.52, 38.05]] }, // 长春→石家庄
          { coords: [[116.4, 39.9], [114.52, 38.05]] },   // 北京→石家庄
          { coords: [[111.65, 40.82], [114.52, 38.05]] }, // 呼和浩特→石家庄
          { coords: [[108.95, 34.27], [114.52, 38.05]] }, // 西安→石家庄
          { coords: [[104.06, 30.67], [114.52, 38.05]] }, // 成都→石家庄
          { coords: [[106.55, 29.57], [114.52, 38.05]] }, // 重庆→石家庄
          { coords: [[109.12, 21.49], [114.52, 38.05]] }, // 北海→石家庄
          { coords: [[110.35, 20.02], [114.52, 38.05]] }, // 海口→石家庄
          { coords: [[119.3, 26.08], [114.52, 38.05]] }, // 福州→石家庄
          { coords: [[121.47, 31.23], [114.52, 38.05]] }  // 上海→石家庄
        ]
      },
      // 添加涟漪特效系列
      {
        name: "涟漪特效",
        type: "effectScatter",
        coordinateSystem: "geo",
        zlevel: 2,
        rippleEffect: {
          brushType: "stroke",
          scale: 4
        },
        label: {
          show: true,
          position: "right",
          formatter: "{b}"
        },
        symbolSize: 8,
        itemStyle: {
          color: "#c5f80e"
        },
        data: [{
          name: "济南",
          value: [117.0, 36.65, 1000]  // 经度,纬度,值
        }]
      }
    ],
  };
  myChart.setOption(option);

  // 窗口大小变化时重绘图表
  window.addEventListener("resize", function () {
    myChart.resize();
  });
};

onMounted(() => {
  nextTick(() => {
    chart1();
  });
});
</script>
<style scoped>
.chartsStyle {
  width: 100%;
  height: 100%;
}
</style>
